<template>
  <!-- 今日设备运行状态 -->
  <el-card>
    <!-- 标题 -->
    <div class="title">
      <h3>今日设备运行状态</h3>
      <p class="ml">更新时间: {{ formattedDate }}</p>
      <el-icon
        color="#86909c"
        style="margin-left: 5px; cursor: pointer"
        @click="fetchDeviceStatus()"
        ><Refresh
      /></el-icon>
    </div>

    <!-- 设备信息 -->
    <div class="equipment">
      <!-- 循环项 -->
      <div class="item" v-for="item in statusData" :key="item.type">
        <h4>{{ item.type }}</h4>
        <img class="mt mb" :src="item.image" />
        <h1>{{ item.inUse }}/{{ item.total }}</h1>
        <div class="statistic-card">
          <el-statistic :value="item.faultyDevices">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                异常设备
                <el-tooltip
                  effect="dark"
                  :content="`当前有${item.faultyDevices}台设备异常，请及时处理`"
                  placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>相较昨日</span>
              <span class="green">
                {{ item.trendValue }}%
                <el-icon color="#67c23a" v-if="item.trend == 'up'">
                  <CaretTop />
                </el-icon>

                <el-icon color="#c60023" v-else>
                  <CaretBottom />
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { formatDate } from "@/utils/date"; // 引入日期格式化工具函数
import { statusApi } from "@/api/status"; // 引入状态API
import type { StatusItem } from "@/api/status"; // 引入状态数据类型

/**
 * 功能作用:获得当前时间
 * 功能描述: 调用 formatDate 函数,传入当前时间的 ISO 字符串格式,返回格式化后的日期字符串
 */
const formattedDate = formatDate(new Date().toISOString());

/**
 * 功能作用:今日设备运行状态区块的数据刷新
 * 功能描述: 声明一个响应式变量,用于存储设备状态数据,创建函数,调用接口,获取数据,如果请求成功,将数据赋值给响应式变量
 * 分两个部分:
 * 1:页面加载时,调用接口获取数据
 * 2:点击刷新图标时,调用接口获取数据
 * 获取接口数据后,用v-for循环遍历数据,渲染到页面上
 *
 */
const statusData = ref<StatusItem[]>([]);
async function fetchDeviceStatus() {
  const res = await statusApi();
  if (res.code === 200) {
    statusData.value = res.data || [];
  }
}
onMounted(() => {
  fetchDeviceStatus();
});
</script>

<style lang="less" scoped>
.title {
  display: flex;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  align-items: flex-end;
  p {
    color: #86909c;
    font-size: 16px;
  }
}

// 容器
.equipment {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  // 循环项
  .item {
    width: 30%;
    text-align: center;
    img {
      width: 50px;
    }
    // 标题
    h4 {
      margin-bottom: 10px;
    }

    h1 {
      font-size: 30px;
      margin: 5px 0;
    }
    :deep(.el-statistic__content) {
      margin-top: 5px !important ;
      margin-bottom: 5px !important ;
    }
  }
}
</style>
